
<style lang="stylus" scoped>
    .container 
        width: 100%;
        height: 100%;
        position relative;
        .tagHeader {
            width 100%;
            height 150px;
            margin-top 50px;
            box-sizing: border-box;
            padding :10px;
            background: url(../../../static/img/bj.png) center center no-repeat;
            background-size: 100% 100%;
            .header_info {
               width 100%;
               height 60px;
               line-height 60px;  
               box-sizing border-box; 
               img {
                   width 60px;
                   height 60px;
                   border-radius: 50%;
                   margin-right 10px;
               }  
               >div span {
                   height 20px;
                   display block;
                   line-height 20px;
                   color #fff;
               }
               >div span:last-child {
                   font-size: 16px;
               }
            } 
            li > span {
                color #fff;
            }
        }
        .text-overflow-1 {
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
        }

        .pro {
            width 100%;
            height auto;
            overflow hidden;
            ul {
                width 100%;
                box-sizing border-box; 
                flex-wrap: wrap;
                margin-top:10px;
                    margin-bottom: 50px;
                li {
                    width 50%; 
                    box-sizing border-box;
                    padding 5px 10px;
                    min-height 100px;
                    position relative
                    div {
                        border 3px solid #fff;
                    }
                    &.center>div {
                        border 3px solid #f50;
                        position relative
                        &:before {
                            content :'';
                            width 40px;
                            height 40px;
                            display block
                            background: url(../../../static/img/mai.png) center center no-repeat;
                            background-size: 100% 100%;
                            position absolute;
                            right: 2px;
                            top: -1px;
                        }
                    }
                    
                    .item {
                        background #fff;
                        width 100%;
                        height 100%;
                        border-radius 5px;
                        padding 5px;
                        box-sizing border-box;
                        
                        
                        img {
                            width 100%;
                            height auto;
                            margin 0 auto;
                            visibility: visible;
                        }
                        .item-cart {
                            width 100%;
                            height 30px;
                            line-height 30px;
                            font-size: 12px;
                            span {
                                display block;
                            }
                            font {
                                color #ff0000;
                            }
                        }
                   
                        .item-goods {
                            font-size: 12px;
                            
                            .item-goods__btn {
                                width 100%;
                                box-sizing border-box;
                                padding 0 10px;
                                span {
                                    width 20px;
                                    height 20px;
                                    display block;
                                    background: url(../../../static/img/add.png) center center no-repeat;
                                    background-size: 100% 100%;

                                }
                                span:first-child {
                                    background: url(../../../static/img/jian.png) center center no-repeat;
                                    background-size: 100% 100%;
                                }
                                input {
                                    width 100%;
                                    height 20px;
                                    display block;
                                    outline none;
                                    line-height 20px;
                                    margin 0 5px;
                                    text-align center;
                                    border 1px solid #e5e5e5;
                                }
                            }
                        }
                        
                    }
                }
            }
        }

        .in-btn {
            width 100%;
            padding 10px 10px;
            position fixed;
            left 0;
            right 0;
            bottom:0px;
            box-sizing border-box
            border-top 1px solid #e5e5e5;
            background #fff;
            button {
                text-align center;
                color #f50;
                outline none;
                border 1px solid #f50;
                margin 0 5px;
                height 30px;
                background #fff;
                border-radius: 5px;
            }
        }
</style>
<template>
    <div class="container flex-display flex-display-column">
        <ComHeader title="个人库存" leftArrow="true"/>
        <div class="tagHeader flex-display flex-display-column">
            <!-- 个人信息 -->
            <div class="header_info flex-display flex-center-align">
                <img :src="info.headimgurl?info.headimgurl:'/static/img/log.png'"/>
                <div class="flex-num-one">
                    <span>{{info.level?info.level:'普通用户'}}</span>
                    <span>{{info.nickname?info.nickname:''}}</span>
                </div>
            </div>
            <!-- 财务列表 -->
            <ul class="flex-num-one flex-display flex-center-align flex-center-pack">
                <li class="flex-display flex-center-align flex-display-column flex-num-one">
                        <span>积分</span>
                        <span>{{info.userscore?info.userscore:'0'}}</span>
                </li>
                <li class="flex-display flex-center-align flex-display-column flex-num-one">
                        <span>库存</span>
                        <span>{{info.inventory?info.inventory:'0'}}</span>
                </li>
            </ul>
        </div>

        <!-- 商品列表 -->
        <div class="pro">
            <ul class="flex-display">
                <li  v-for="(item,index) in goodslist" :class="{'center':item.quantity}">
                    <div class="item flex-display flex-display-column ">
                        <img :src="item.imgUrl"/>
                        <!-- <div class="item-cart flex-display">
                            <span class="flex-num-one text-overflow-1">价格:<font>￥{{item.price}}</font></span>
                            <span class="flex-num-one text-overflow-1">积分:<font>{{item.integral}}</font></span>
                        </div> -->
                        <div>
                            库存：{{item.stock?item.stock:'0'}}
                        </div>
                        <div class="item-goods flex-display flex-center-align">
                            <span>出货：</span>
                            <div class="flex-num-one flex-display flex-center-align item-goods__btn">
                                <span @click="minusValue(index)"></span>
                                <input type="number" class="flex-num-one" v-model="item.quantity"/>
                                <span @click="addValue(index)"></span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div> 
        <div class="in-btn flex-display flex-center-pack">
            <button class="flex-num-one" @click="fnOpenConfirmPage">确认出货</button>
            <button class="flex-num-one" @click="fnOpenComPage">公司库存</button>
        </div>
    </div>
</template>
<script>
import ComHeader from '@/common/ComHeader' 
import { Toast } from 'mint-ui';
import api from "@/fetch/api";
export default {
    data() {
        return {
            // 个人信息
            info:'',
            // 商品列表
            // 临时数据
            goodslist:[
                {
                    imgUrl:'//gw3.alicdn.com/bao/uploaded/i2/2886469772/O1CN01f8IGDi2M3crOfOFfC_!!0-item_pic.jpg_210x210.jpg',
                    price:1000,
                    integral:1000,
                    stock:3,
                    // 数量
                    quantity:0,

                },
                {
                    imgUrl:'//gw3.alicdn.com/bao/uploaded/i2/2886469772/O1CN01f8IGDi2M3crOfOFfC_!!0-item_pic.jpg_210x210.jpg',
                    price:1000,
                    integral:1000,
                    stock:3,
                    quantity:0

                },
                {
                    imgUrl:'//gw3.alicdn.com/bao/uploaded/i2/2886469772/O1CN01f8IGDi2M3crOfOFfC_!!0-item_pic.jpg_210x210.jpg',
                    price:1000,
                    integral:1000,
                    stock:3,
                    quantity:0

                },
            ]
            
        }
    },
    created() {
        // 个人信息
        this.ethelWxUserInfo = window.localStorage.getItem(this.companyUnique) ? JSON.parse(window.localStorage.getItem(this.companyUnique)) : '';

        // 获取个人信息
        const params = {
            userid:this.ethelWxUserInfo.id
        }
        api.getMerchantInfo(params)
            .catch(res => {
                console.log('个人信息',res.data)
                // 获取用户信息的，头像，库存
                this.info = res.data

                // 下面可以不要

                // code等于0,1的情况
                if(res.data.code==0 || res.data.code==1){
                    Toast({ 
                        message: res.data.msg,
                        position: 'center', 
                        duration: 1000 , 
                        iconClass: 'icon-fail',
                        className:'addClass' 
                    });
                }else if(res.data.code==2){
                    // code等于2的情况，该联合创始人还没有注册
                    const params2 = {
                        userid:this.ethelWxUserInfo.id
                    }
                    api.regiMerchant(params2)
                        .catch(res => {
                            console.log(123,res)
                            this.info = res.data
                    })
                }
        })

        // 获取库存列表
        const params3 = {
            userid:this.ethelWxUserInfo.id,
            type:'one'
        }
        api.getGoodsInfo(params3)
            .catch(res => {
                console.log('个人库存',res.data,res.data.length)
                // this.goodslist = res.data
        })

        
    },
    methods: {
        // 确认出货，保存当前选中的商品信息
        fnOpenConfirmPage() {
            this.$router.push('/confirmOrder')
        },

        // 公司库存，打开另一个界面
        fnOpenComPage() {
            this.$router.push('/comInventory')
        },
        // 数量减少
        minusValue(index){
            console.log('数量减少',index)
            this.goodslist[index].quantity --
            // 小于0
            if(this.goodslist[index].quantity <=0){
                this.goodslist[index].quantity = 0
                Toast({ 
                    message: '我是有底线的',
                    position: 'center', 
                    duration: 1000 , 
                    iconClass: 'icon-fail',
                    className:'addClass' 
                });
            }
            
        },
        // 数量增加
        addValue(index){
            console.log('数量增加',index)
            this.goodslist[index].quantity ++
            // 大于库存
            if(this.goodslist[index].quantity > this.goodslist[index].stock){
                this.goodslist[index].quantity = this.goodslist[index].stock
                Toast({ 
                    message: '库存不足',
                    position: 'center', 
                    duration: 1000 , 
                    iconClass: 'icon-fail',
                    className:'addClass' 
                });
            }
        },
    },

    components: {
      ComHeader,
      Toast
    }
}
</script>


